<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="application/javascript" src="../js/vue.js"></script>
    <script type="application/javascript" src="../js/index.js"></script>
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>
<div id="app">
    <div style="width: 500px">
        <el-form :model="formData" class="demo-form-inline">
            <el-form-item label="账号">
                <el-input v-model="formData.name" placeholder="账号"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="formData.password" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
<script>
    let app = new Vue({
        el: "#app",
        data() {
            return {
                // 表单数据
                formData: {
                    name: '',
                    password: ''
                }
            }
        },
        methods: {
            fun01() {

            },
            // ctrl+alt+l 自动缩进
            onSubmit() {
                console.log('submit!');
                console.log(this.formData)
            }
        },
    })
</script>


</body>
</html>